<script setup lang="ts">
import { NMessageProvider } from "naive-ui";
import { useRouter } from "vue-router";
import { useUserStore } from "./stores/user";
import { computed, ref } from "vue";
import jWait from "@/components/j-wait/index.vue"
// import * as jose from 'node-jose';
// import {trySampleRequest, oauth2SignOut} from "./auth.js"
// import Game from "./components/Game.vue";
// console.log("jose", jose)
import { jwtDecode } from "jwt-decode";
// import { io } from "https://cdn.socket.io/4.7.4/socket.io.esm.min.js";
import { io } from "socket.io-client"
import { post } from "./comm/request";
// import { useMessage } from 'naive-ui'

console.log("jwt-decode", jwtDecode)
// const message = useMessage();

const router = useRouter();
const userStore = useUserStore();
const email = ref("")

const percentage = ref(0);

const onHome = () => {
    router.push("/");
};

const onManage = () => {
    router.push("/manage");
};

const onLogin = () => {
    router.push("/login");
};

const onImage = () => {
    router.push("/image");
};

const onVideo = () => {
    router.push("/video");
};

const onDownload = () => {
    router.push("/download");
};

const onLog = () => {
    router.push("/log");
};

const onNet = () => {
    router.push("/net");
};

const isAdmin = computed(() => {
    return userStore.info?.username == "jsz";
});

// let clientCode: any;
const onGoogleIn = () => {
    const google = (window as any)["google"]

    google.accounts.id.initialize({
        client_id: '338790244481-vsodkr7ukn2gq2ijul1kfvorub1h7p54.apps.googleusercontent.com',
        // client_id: "338790244481-34me1beahrf91h4tk7c1tgfn7vh3arrv.apps.googleusercontent.com",
        callback: (e: any) => {
            console.log(e);
            const input = e.credential;
            console.log(input);
            const result: any = jwtDecode(input);
            console.log(result);
            email.value = result.email;
        }
    });
    google.accounts.id.prompt((response: any) => {
        console.log("response", response)
    });
}

const onGoogleOut = () => {
    const google = (window as any)["google"]
    google.accounts.id.disableAutoSelect();
    // google.accounts.id.signOut();
}

const onLogout = ()=>{
    userStore.logout();
    router.push("/login");
}

let size = ref(0)

const onConvert = async () => {
    let res: any = await post("/app/assets/video/convert", { name: "340497c6fbd073c2dc0f076b3241f556" }, true);
    console.log("文件", res);
    if (res.data) {
        size.value = res.data;
        onConn();
    }
}

const onConn = () => {
    // const socket = io("https://www.step2step.cn:8989");
    const socket = io("http://120.48.63.39:8989");
    // const socket = io("wss://www.step2step.cn");
    // const socket = io("http://120.48.63.39");
    console.log("socket", socket)
    socket.on("connect", () => {
        console.log("conn", socket.disconnected); // false
        // message.success("連接成功")
        socket.emit("message", "hello world!" + new Date());
    });

    socket.on("connect_error", () => {
        // message.error("連接失敗")
        socket.connect();
    });

    socket.on("progress", (s: any) => {
        // console.log("aim", s);
        const regex = /size=\s*(\d+)kB/;
        const match = regex.exec(s);

        if (match && match[1]) {
            const extractedSize = +match[1];
            // console.log(extractedSize); // 输出: 27401
            let p = Math.floor((extractedSize / size.value) * 100);

            if (p > 100) {
                p = 100;
            }
            percentage.value = p;
            console.log(p + "%");

        } else {
            // console.log('匹配失败');
            console.log("aim", s);
        }

        if (s.includes("success")) {
            socket.disconnect()
            size.value = 0;
        }
    })


    socket.on("chat all", (s: any) => {
        console.log("all", s)
    })

    socket.on("disconnect", () => {
        console.log(socket.id); // undefined
    });
}
</script>

<template>
    <n-message-provider>
        <div class="pages">
            <div>email: {{ email }}</div>
            <div class="tbs">
                <div class="tb" @click="onGoogleIn">onGoogleIn</div>
                <div class="tb" @click="onGoogleOut">onGoogleOut</div>
                <div class="tb" @click="onConn">onConn</div>
                <div class="tb" @click="onConvert">onConvert</div>
            </div>

            <!-- <div id="g_id_onload" data-client_id="338790244481-vsodkr7ukn2gq2ijul1kfvorub1h7p54.apps.googleusercontent.com"
                :data-callback="handleCredentialResponse">
            </div> -->
            <div class="navs" v-if="isAdmin">
                <div class="nav" @click="onHome">首页</div>
                <div class="nav" @click="onNet">连接</div>
                <div class="nav" @click="onManage">管理</div>
                <div class="nav" @click="onLogin">登录</div>
                <div class="nav" @click="onVideo">视频</div>
                <div class="nav" @click="onDownload">下载</div>
                <div class="nav" @click="onLog">日志</div>
                <div class="nav" @click="onImage">图片</div>
            </div>
            <div class="navs" v-else>
                <div class="nav" @click="onHome">首页</div>
                <div class="nav" @click="onVideo">视频</div>
            </div>
            <div class="rt">
                <router-view></router-view>
            </div>
            <div class="state" v-if="userStore.info?.username" @click="onLogout">{{ userStore.info?.username }}</div>
        </div>

        <jWait :percentage="percentage" v-if="size"></jWait>
    </n-message-provider>
</template>

<style lang="less" scoped>
.pages {
    width: 100%;
    display: flex;
    height: 100vh;
    flex-direction: column;

    .navs {
        display: flex;
        gap: 10px;

        .nav {
            cursor: pointer;
            background: #f0f0f0;
            padding: 10px;
        }
    }

    .rt {
        flex: 1;
        height: 0;
        overflow: hidden;
    }
}

.tbs {
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    .tb {
        padding: 4px 10px;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
    }
}

.state{
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 1px 4px;
    background: #999;
    color: #fff;
    font-size: 12px;
    z-index: 1;
    cursor: default;
}
</style>
